<template>
	<view class="popup" :class="booleans?'select_opacity':'opacity'" @click.stop="close" :style="{'top': topHeight,'height':'calc(100vh - ' + heights + ' )'}">
			<view
			class="popup_main" 
			:class="boolean?select.select_scale:select.scale"
			:style="{'--height':height}"
			@click.stop="aa"
			>
				<!-- 自定义内容 -->
				<!-- 商品分类类别树 -->
				<view 
				v-if="typePage == 'commonityClassTree'"
				class="classity">
						<tkiTree ref="tkitree" 
						:idKey='idKey'
						@confirm='comfirmTree'
						:range="List" 
						:rangeKey="rangeKey" 
						confirmColor="#ec4141"></tkiTree>
						
						<view class="btn">
							<view @click="reset" class="btn_one">
								<newBtn borderColor='#ddd' name='重置'></newBtn>
							</view>
							<view @click="confirm" class="btn_one">
								<newBtn bgColor="#ec4141" color="#FFF" name="确定"></newBtn>
							</view>
						</view>
				</view>
			</view>
	</view>

</template>

<script>
	import {listMallCommodityClassifyZtree} from '@/api/global.js'
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import newBtn from "@/components/newBtn/newBtn.vue"
	export default {
		components:{
			tkiTree,
			newBtn
		},
		name: "popup",
		props: {
			// top值 出现的位置 点击页面计算好传过来
			topHeight: {
				type: String,
				default: ''
			},
			//组件高度 点击页面计算好传过来
			height: {
				type: String,
				default: ''
			},
			//哪个组件传过来的类型 根据类型展示不同操作
			typePage:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				// 控制样式切换
				select:{
					scale:['scale'],
					select_scale:['select_.scale']
				},
				// 控制白盒子缩放
				boolean:false,
				// 控制遮罩层
				booleans:false,
				List:[],//数据
				idKey:'',//指定 Object 中 key 的值作为单条数据的唯一id
				rangeKey:'',//指定 Object 中 key 的值作为选择器显示的内容
			};
		},
		computed:{
			heights(){
				if(this.booleans){
					return this.topHeight
				}else{
					return '100vh'
				}
			}
		},
		created(){
			this.getList()//获取数据
		},
		methods:{
			//树解构点击重置
			reset(){
				if(this.typePage == 'commonityClassTree'){
					this.$emit('reset')
					
					this.close()
				}//商品分类树
			},
			//树解构点击确定
			confirm(){
				if(this.typePage == 'commonityClassTree'){
					this.$refs.tkitree._confirm()
				}//商品分类树
			},
			//拿到树返回的数据
			comfirmTree(item){
				console.log(item);
				this.$emit('confirm',item)
				this.close()
			},
			// 获取数据
			async getList(){
				if(this.typePage == 'commonityClassTree'){ //商品分类树
					let res = await listMallCommodityClassifyZtree()
					this.idKey = 'commodityClassifyId'
					this.rangeKey = 'name'
					this.List = [res?.data?.info]
				}
			},
			//打开弹出层
			open(){
				setTimeout(()=>{
					this.booleans = true
					this.boolean=true
					if(this.typePage == 'commonityClassTree'){
						this.$refs.tkitree._show()
					}//商品分类树
				},200)
				
				
				
			},
			//关闭弹出层
			close(){
				// setTimeout(()=>{
				// 	this.booleans = false
				// },500)
				// setTimeout(()=>{
				// 	this.boolean = false
				// },200)
				this.$refs.tkitree._reTreeList()
					this.booleans = false
					this.boolean = false
				setTimeout(()=>{
					if(this.typePage == 'commonityClassTree'){
						
						this.$refs.tkitree._hide()
						console.log(this.$refs.tkitree.showTree);
					}//商品分类树
				},500)
			},
			//防止点击
			aa(){
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 100%;
		height: 300px;
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		left: 0;
		z-index: 10070;
		transition: 0.2s ease;
	}
	
	.popup_main {
		width: 100%;
		background-color: #FFF;
		border-radius: 0 0 20rpx 20rpx;
		transition: 0.5s ease;
		height: var(--height);
		position: absolute;
		top:0;
		
		.classity{
			width: 100%;
			max-height: 80%;
			overflow: hidden;
			overflow-y: auto;
			
			.btn{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				position: absolute;
				bottom:40rpx;
				left: 0;
				box-sizing: border-box;
				.btn_one{
					width: 50%;
				}
			}
		}
	}
	
	.scale{
		height:0 !important;
	}
	.select_.scale{
		height:var(--height) !important;
	}
	.opacity{
		opacity: 0;
		visibility: hidden;
		display: none;
	}
	.select_opacity{
		opacity: 1;
		visibility: visible;
		display: block;
	}
</style>
